<template>
  
    <el-popover 
                  title="登录后你可以:"
                  width="300"
                  popper-class="tan"
                  :hide-after="300"
                  trigger="hover"
                >
                  <p>
                    <svg t="1720715885915" class=" icon" style="width: 1.5rem;height: 1.5rem;margin-left:5%; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="989">
                      <path d="M946.21184 200.94464h-72.23808V124.61568l-24.56064-11.8272c-4.91008-2.36032-121.71776-58.04032-223.90272-58.04032-47.8464 0-86.11328 12.09344-114.36032 36.05504-28.2624-23.9616-66.50368-36.05504-114.37056-36.05504-102.17472 0-218.98752 55.68-223.90784 58.04032l-24.52992 11.8272v76.32896H77.79328c-16.01024 0-28.99968 15.93344-28.99968 35.57376v665.71776c0 19.64544 12.98944 35.57376 28.99968 35.57376h868.40832c16.01024 0 28.99968-15.92832 28.99968-35.57376V236.5184c0.01024-19.64032-12.9792-35.57376-28.98944-35.57376z m-110.90944-54.22592v530.432c-59.89888-25.15456-218.98752-82.18624-304.82944-20.70016V122.27072c24.21248-22.17984 58.28096-30.31552 95.03744-30.31552 96.0256 0 209.792 54.76352 209.792 54.76352z m-7.97696 562.84672h-301.04576c49.75616-57.89696 213.888-30.04928 295.92576 0h5.12zM396.76928 91.9552c36.75648 0 70.8352 8.15104 95.04256 30.31552v534.17984c-85.8624-61.46048-244.92544-4.4544-304.82432 20.70016v-530.432S300.73344 91.9552 396.76928 91.9552z m99.21536 617.61024H200.00768c82.01728-30.08512 246.21056-57.97376 295.97696 0z m436.56704 172.44672H91.43296V241.39776H148.3264v505.37472h725.632V241.39776h58.58816v645.7344-5.12z" p-id="990" fill="#06971d">
                      </path>
                      <path d="M240.1792 205.77792c24.76544-10.84928 95.60576-39.296 157.25568-39.296 28.69248 0 55.31648 6.29248 74.46016 23.25504v-28.17024c-20.1472-11.4944-44.96896-17.3568-74.46016-17.3568-81.02912 0-173.68064 44.16-177.58208 46.03392l-19.456 9.37984v25.9328l39.7824-19.77856zM240.1792 336.9984c24.76544-10.84928 95.60576-39.296 157.25568-39.296 28.69248 0 55.31648 6.29248 74.46016 23.25504v-28.17024c-20.1472-11.4944-44.96896-17.3568-74.46016-17.3568-81.02912 0-173.68064 44.16-177.58208 46.03392l-19.456 9.37984v25.9328l39.7824-19.77856zM240.1792 468.224c24.76544-10.84928 95.60576-39.296 157.25568-39.296 28.69248 0 55.31648 6.29248 74.46016 23.25504v-28.17024c-20.1472-11.4944-44.96896-17.3568-74.46016-17.3568-81.02912 0-173.68064 44.16-177.58208 46.03392l-19.456 9.37984v25.9328l39.7824-19.77856zM240.1792 599.44448c24.76544-10.84928 95.60576-39.296 157.25568-39.296 28.69248 0 55.31648 6.29248 74.46016 23.24992v-28.17024c-20.1472-11.48928-44.96896-17.35168-74.46016-17.35168-81.02912 0-173.68064 44.14976-177.58208 46.02368l-19.456 9.37984v25.9328l39.7824-19.76832zM775.97184 205.77792c-24.77568-10.84928-95.616-39.296-157.26592-39.296-28.69248 0-55.31648 6.29248-74.46016 23.25504v-28.17024c20.15744-11.4944 44.96896-17.3568 74.46016-17.3568 81.02912 0 173.68576 44.16 177.5872 46.03392l19.46112 9.37984v25.9328l-39.7824-19.77856zM775.97184 336.9984c-24.77568-10.84928-95.616-39.296-157.26592-39.296-28.69248 0-55.31136 6.29248-74.46016 23.25504v-28.17024c20.15744-11.4944 44.96896-17.3568 74.46016-17.3568 81.02912 0 173.68576 44.15488 177.5872 46.0288l19.46112 9.37984v25.9328l-39.7824-19.77344zM775.97184 468.224c-24.77568-10.84928-95.616-39.296-157.26592-39.296-28.69248 0-55.31648 6.29248-74.46016 23.25504v-28.17024c20.15744-11.4944 44.96896-17.3568 74.46016-17.3568 81.02912 0 173.68576 44.16 177.5872 46.03392l19.46112 9.37984v25.9328l-39.7824-19.77856zM775.97184 599.44448c-24.77568-10.84928-95.616-39.296-157.26592-39.296-28.69248 0-55.31136 6.29248-74.46016 23.24992v-28.17024c20.15744-11.48928 44.96896-17.35168 74.46016-17.35168 81.02912 0 173.68576 44.14976 177.5872 46.02368l19.46112 9.37984v25.9328l-39.7824-19.76832z" p-id="991" fill="#06971d">
                      </path>
                    </svg>
                    学习竹编文化
                    <svg t="1720716472403" class="icon" style="width: 1.5rem;height: 1.5rem;vertical-align: middle;margin-left:5%; fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1025">
                      <path d="M423.253333 852.309333m-74.922666 0a74.922667 74.922667 0 1 0 149.845333 0 74.922667 74.922667 0 1 0-149.845333 0Z" fill="#06971d" p-id="1026">
                      </path>
                      <path d="M732.16 852.309333m-74.922667 0a74.922667 74.922667 0 1 0 149.845334 0 74.922667 74.922667 0 1 0-149.845334 0Z" fill="#06971d" p-id="1027">
                      </path>
                      <path d="M803.84 708.266667H370.858667c-45.738667 0-85.504-30.890667-96.597334-75.093334l-103.082666-448.853333c-3.413333-13.141333-15.872-22.869333-30.378667-22.869333H87.04c-18.773333 0-34.133333-15.36-34.133333-34.133334s15.36-34.133333 34.133333-34.133333h53.930667c45.738667 0 85.504 30.890667 96.597333 75.264l102.912 448.682667c3.413333 13.141333 15.872 22.869333 30.378667 22.869333H803.84c13.482667 0 25.6-8.533333 29.866667-21.504l86.698666-301.056c3.754667-11.093333 2.218667-21.504-3.754666-29.866667s-15.36-13.141333-25.6-13.141333H393.898667c-18.773333 0-34.133333-15.36-34.133334-34.133333s15.36-34.133333 34.133334-34.133334H890.88c32.426667 0 61.952 15.189333 81.066667 41.472 18.944 26.453333 23.893333 59.221333 13.482666 89.941334l-86.698666 301.056c-13.994667 42.325333-52.053333 69.632-94.890667 69.632z" fill="#06971d" p-id="1028">
                      </path>
                    </svg>
                    购买竹编产品
                    <br>
                    <svg t="1720716797379" class="icon" style="  margin-left:6%; width: 1.2rem;height: 1.2rem;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1265">
                      <path d="M481.578667 968.832l-157.909334-158.293333H85.418667A85.290667 85.290667 0 0 1 0 725.12L0.426667 128.042667C0.426667 80.768 38.4 42.666667 85.845333 42.666667h852.778667c47.189333 0 85.418667 38.101333 85.376 85.418666l-0.426667 597.12c0 47.146667-38.229333 85.333333-85.376 85.333334h-237.781333l-158.549333 158.293333a42.624 42.624 0 0 1-60.288 0z m456.704-243.712L938.666667 128.042667s-852.906667-0.128-852.906667 0.042666c0 0-0.384 597.077333-0.298667 597.077334H341.333333c11.306667 0 22.186667 4.48 30.165334 12.501333l140.330666 140.629333 140.8-140.672a42.624 42.624 0 0 1 30.165334-12.458666h255.488zM277.333333 512a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m234.666667 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m234.666667 0a64 64 0 1 1 0-128 64 64 0 0 1 0 128z" fill="#06971d" p-id="1266">
                      </path>
                    </svg>
                    发表评论/弹幕
                    <svg t="1720716761111" class="icon" style="width: 1.3rem;height: 1.3rem;margin-left:5%; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1085">
                      <path d="M704.512 387.072q21.504 25.6 46.08 52.224 20.48 23.552 45.568 52.224t51.712 58.368q33.792 38.912 55.808 69.632t34.816 56.32 17.408 47.104 4.608 43.008l0 66.56q0 30.72-10.24 55.296t-28.16 42.496-40.96 27.648-48.64 9.728l-631.808 0q-27.648 0-52.736-9.216t-44.032-26.112-30.208-40.448-11.264-53.248l0-78.848q0-24.576 4.608-47.104t16.896-47.104 33.792-52.736 54.272-61.952q26.624-28.672 54.784-57.856t50.688-52.736q26.624-27.648 51.2-53.248l375.808 0zM512 775.168q26.624 0 50.176-10.24t40.96-27.648 27.648-41.472 10.24-50.688-10.24-50.176-27.648-40.96-40.96-27.648-50.176-10.24-50.688 10.24-41.472 27.648-27.648 40.96-10.24 50.176 10.24 50.688 27.648 41.472 41.472 27.648 50.688 10.24zM1025.024 263.168l0 64.512q0 26.624-18.944 45.056t-45.568 18.432l-128 0q-26.624 0-45.056-18.432t-18.432-45.056l0-64.512-513.024 0 0 64.512q0 26.624-18.432 45.056t-45.056 18.432l-128 0q-26.624 0-45.568-18.432t-18.944-45.056l0-64.512 0-2.048q0-12.288 6.144-20.992t15.36-15.872 20.48-12.8 22.528-12.8q11.264-6.144 50.688-27.136t99.328-43.52 136.192-39.936 162.304-17.408q98.304 0 175.616 17.408t134.144 39.936 91.136 43.52 46.592 27.136q12.288 7.168 23.552 12.8t20.48 12.8 14.848 15.872 5.632 20.992l0 2.048z" p-id="1086" fill="#06971d">
                      </path>
                    </svg>
                    联系我们
                  </p>
                  <div style=" text-align: right; margin: 0">
                    <el-button  style="border: 1px solid rgb(217, 217, 217);width: 100%; height:2rem" size="small" type="primary" @click="open_card_now()">
                      登录
                    </el-button>
                    <br>
                  </div>
                  <div style="margin-left:32%;margin-top:2%;">
                    没有账号？
                  <el-link @click="open_card_login">
                    注册
                  </el-link>
                  </div>
                  <template #reference>
                    <div v-if="login_off" @click="emit('open_dialogFormVisible') " class="login00">
                      <svg t="1720698742021" class="icon photo"  style="width: 2rem;height: 2rem;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1290">
                        <path d="M575.215 547.318c53.367-24.316 90.562-78.011 90.562-140.522 0-85.257-69.149-154.383-154.406-154.383-85.299 0-154.427 69.126-154.427 154.383 0 62.49 37.172 116.185 90.562 140.522-87.156 27.24-150.586 108.698-150.586 204.715 0 12.071 9.779 21.827 21.827 21.827s21.827-9.756 21.827-21.827c0-94.161 76.613-170.774 170.776-170.774 94.184 0 170.797 76.613 170.797 170.774 0 12.071 9.756 21.827 21.827 21.827 12.07 0 21.827-9.756 21.827-21.827 0.021-95.994-63.43-177.475-150.586-204.715zM400.621 406.817c0-61.072 49.678-110.729 110.773-110.729 61.072 0 110.75 49.657 110.75 110.729 0 61.094-49.678 110.794-110.75 110.794-61.095 0-110.773-49.7-110.773-110.794z" p-id="1291" fill="#2c2c2c">
                        </path>
                        <path d="M511.371 960.81c-246.951 0-447.869-200.918-447.869-447.891 0-246.93 200.919-447.871 447.869-447.871 246.973 0 447.892 200.919 447.892 447.871 0 246.973-200.919 447.891-447.892 447.891z m0-854.269c-224.098 0-406.398 182.301-406.398 406.377s182.3 406.397 406.398 406.397c224.099 0 406.42-182.321 406.42-406.397S735.47 106.541 511.371 106.541z" p-id="1292" fill="#2c2c2c">
                        </path>
                      </svg>
                      <a  style=" margin-top: -0.25rem;">
                        请登录
                      </a>
                    </div>
                  </template>
                </el-popover>
                
                <el-popover 
                  popper-style="background-color:rgb(175, 241, 168);border:none; width:250px;position:fixed;left:994px;z-index:1;top:70px;"
                  :offset="20"
                  :show-arrow="false"
                  width="250"
                  popper-class="tan"
                  :hide-after="300"
                  title="  "
                  @before-leave="leave_tan"
                >
                <img :class="element_style" class="img_photo_open" :src="photo" alt="头像">
                  <div class="username_open">
                    {{ username }}
                  </div>
                  <div @click="open_personal" class="new_button">
                    <el-button>
                      <svg class="icon" style="margin-left:-4px; width: 1.4em;height: 1.4em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691"><path d="M867.2672 561.792c-81.216-66.496-162.048-133.376-243.072-200.128C586.9472 331.008 549.6992 300.352 512.3872 269.568c-3.264 2.368-6.016 4.288-8.64 6.4C387.2032 372.096 270.5312 468.16 154.2432 564.608 149.9552 568.192 146.9472 575.936 146.8832 581.76c-0.448 97.344-0.384 194.752-0.256 292.096 0 30.208 15.936 45.824 46.464 45.824 74.944 0.064 149.824 0 224.768 0 4.032 0 8.064-0.448 13.184-0.768 0-81.344 0-161.6 0-242.432 54.336 0 107.52 0 161.856 0 0 80.576 0 160.896 0 243.264 6.144 0 10.24 0 14.4 0 74.112 0 148.16 0 222.272 0 32.768 0 47.936-15.232 47.936-48.32 0.064-95.68-0.128-191.36 0.192-286.976C877.7632 574.592 874.8832 568.128 867.2672 561.792zM1009.7312 495.808c-38.08-31.68-75.776-63.808-114.56-94.592-13.184-10.432-18.24-21.12-18.048-38.208 1.024-76.608 0.512-153.28 0.448-229.888 0-18.624-5.888-26.176-21.504-26.304-39.808-0.32-79.616-0.32-119.424 0-14.016 0.128-20.8 7.04-21.312 21.312-0.512 12.672-0.192 25.408-0.192 38.08 0 27.008 0 54.016 0 84.032-6.4-5.12-9.984-7.936-13.504-10.88-44.16-36.928-88.32-73.856-132.544-110.784C530.2432 96.256 493.9552 96.192 455.0432 128.576 374.0192 195.968 293.0592 263.488 212.0352 330.944 146.3712 385.664 80.7072 440.448 14.9792 495.168-4.0288 511.04-4.6688 519.04 11.5232 538.24c9.28 11.008 18.432 22.08 27.712 33.088 13.888 16.448 23.04 17.28 39.552 3.456 108.864-90.816 217.728-181.76 326.656-272.576C440.7712 272.704 476.2272 243.2 512.0032 213.376c35.712 29.76 70.848 59.008 105.92 88.256 109.184 91.136 218.432 182.272 327.616 273.408 16.32 13.632 25.408 12.672 39.424-3.968 9.536-11.328 19.008-22.72 28.544-34.048C1028.4192 519.296 1027.6512 510.72 1009.7312 495.808z" p-id="1692"></path></svg>
                      <div style="margin-left: 10px;">个人主页
                        <svg class="icon" style="margin-left:130%; width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="769"><path d="M733.866667 509.866667c0-17.066667-6.4-34.133333-19.2-46.933334L396.8 145.066667c-25.6-25.6-66.133333-25.6-89.6 0s-25.6 64 0 89.6l277.333333 277.333333-275.2 277.333333c-25.6 25.6-25.6 66.133333 0 89.6 25.6 25.6 64 25.6 89.6 0l317.866667-320c10.666667-14.933333 17.066667-32 17.066667-49.066666z" p-id="770"></path></svg>
                      </div>
                      </el-button>
                  </div>
                  <div class="fenge" ></div>
                  <a href="/" @click="close_login" class="new_button">
                    <el-button>
                      <svg class="icon" style="width: 1.2em;height: 1.2em;margin-top:-2.5px; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="769"><path d="M581.632 697.344l126.976 0 0 194.56q0 33.792-10.24 58.88t-27.136 40.96-39.424 23.552-48.128 7.68l-452.608 0q-24.576 0-48.128-9.728t-41.472-27.136-29.184-40.96-11.264-52.224l0-706.56q0-24.576 11.776-47.104t30.208-39.936 40.96-28.16 45.056-10.752l449.536 0q26.624 0 50.176 11.776t41.472 29.696 28.16 40.448 10.24 44.032l0 188.416-126.976 0 1.024-195.584-452.608 0-1.024 713.728 452.608 0 0-195.584zM1021.952 505.856q37.888 30.72 2.048 60.416-20.48 15.36-44.544 37.888t-50.176 46.592-51.712 47.616-47.104 40.96q-23.552 18.432-40.448 18.432t-16.896-24.576q2.048-14.336 0.512-35.84t-1.536-36.864q0-17.408-12.288-21.504t-29.696-4.096l-40.96 0-62.464 0q-34.816 0-73.216-0.512t-73.216-0.512l-62.464 0-41.984 0q-8.192 0-17.92-1.536t-17.408-6.656-12.288-14.336-4.608-23.552q0-19.456-0.512-46.08t0.512-47.104q0-27.648 13.312-37.888t43.008-9.216l33.792 0 59.392 0q32.768 0 70.144 0.512t71.168 0.512l61.44 0 38.912 0q25.6 1.024 43.52-4.096t17.92-22.528q0-14.336 1.024-32.256t1.024-32.256q0-23.552 12.8-29.696t32.256 9.216q19.456 16.384 45.568 38.4t52.736 45.056 52.736 45.568 47.616 39.936z" p-id="770"></path></svg>
                      <div style="margin-left: 10px;">退出登录
                        <svg class="icon" style="margin-left:130%; width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="769"><path d="M733.866667 509.866667c0-17.066667-6.4-34.133333-19.2-46.933334L396.8 145.066667c-25.6-25.6-66.133333-25.6-89.6 0s-25.6 64 0 89.6l277.333333 277.333333-275.2 277.333333c-25.6 25.6-25.6 66.133333 0 89.6 25.6 25.6 64 25.6 89.6 0l317.866667-320c10.666667-14.933333 17.066667-32 17.066667-49.066666z" p-id="770"></path></svg>
                      </div>
                      </el-button>
                    </a>
                  <template #reference>
                    <div  v-if="login_off==false" style="margin-left: 15%;" class="login00">
                      <img :class="element_style_close"  @mouseover="changeStyle_close('grow')" class="img_photo" :src="photo" alt="头像">
                    </div>
                  </template>
                </el-popover>

                <div @click="open_email" v-if="login_off==false" class="information-icon" style="margin-left: 360px;">
                  <div class="information-icon-number"></div>
                  <svg t="1725927685390" class="icon" style="width: 28px;height: 28px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1707"><path d="M881.152 155.648H142.848C89.6 155.648 46.08 199.168 46.08 252.416v514.048c0 53.248 43.52 96.768 96.768 96.768h738.304c53.248 0 96.768-43.52 96.768-96.768V252.416c0-53.248-43.52-96.768-96.768-96.768zM142.848 208.384h738.304c24.064 0 44.032 19.968 44.032 44.032v40.448L512 622.08 98.816 292.864v-40.448c0-24.064 19.968-44.032 44.032-44.032z m738.304 602.112H142.848c-24.064 0-44.032-19.968-44.032-44.032V360.448l396.8 315.904c4.608 3.584 10.752 5.632 16.384 5.632s11.776-2.048 16.384-5.632l396.8-315.904v406.016c0 24.064-19.968 44.032-44.032 44.032z" fill="#048b0d" p-id="1708"></path></svg>
                </div>
</template>
<script lang="ts" setup>

import { closeLoginData, getLoginData } from '@/service/login/people_login';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
let photo = ref('')
let login_off = ref(true)
let element_style_close = ref('')
let element_style = ref('')
let username = ref('')
const emit = defineEmits(['open_dialogFormVisible','close_dialogFormVisible'])

const open_email=()=>{
  router.push('/main/email/content')
}
const login_off_new=(value:any)=>{
  photo.value=value.file_name
  username.value=value.username
  emit('close_dialogFormVisible')
  if(value!='1'){
    login_off.value=false
  }
}

const open_card_now=()=>{
  emit('open_dialogFormVisible','password')
}
const open_card_login=()=>{
  emit('open_dialogFormVisible','login')
}
const close_login = ()=>{
  closeLoginData()
  // window.location.reload()
  login_off.value=true
}
const open_personal=()=>{
  router.push('/main/personal/information')
}
const leave_tan=()=>{
  element_style_close.value='out'
  element_style.value='out'
}
const changeStyle_close=(res:string)=>{
  element_style.value='grow'
 element_style_close.value=res
}
onMounted(()=>{
  openSession()
})
const openSession=async()=>{
  const res = await getLoginData()
  if(res.success=='1'){
    login_off_new('1')
  }else{
    login_off_new(res)
    window.sessionStorage.setItem('id',res.id)
  }
}
defineExpose({openSession})
</script>